// 工具
(function(window, undefined){
    Tools = {
        getRandom: (min, max) => {
            return Math.floor(Math.random()*(max - min + 1)) + min
        },
        $: id => document.getElementById(id)
    }
    window.Tools = Tools
}
)(window, undefined);
// 食物


(function(window, undefined){
    // 记录上次存储的食物
    var elements = []
    function Food(options) {
        options = options || {}
        this.x = options.x || 0
        this.y = options.y || 0
        this.width = options.width || 20
        this.height = options.height || 20
        this.color = options.color || 'green'
    }

    Food.prototype.render = function(map) {
        remove()
        // 动态生成div
        var div = document.createElement('div')
        map.appendChild(div)
        elements.push(div)
        // this.x = Tools.getRandom(0, map.offsetWidth - this.width)
        // this.y = Tools.getRandom(0, map.offsetHeight - this.height)
        this.x = Tools.getRandom(0, map.offsetWidth/this.width-1)*this.width
        this.y = Tools.getRandom(0, map.offsetHeight/this.height-1)*this.height
        div.style.width = this.width + 'px'
        div.style.height = this.height + 'px'
        div.style.left = this.x + 'px'
        div.style.top = this.y + 'px'
        div.style.position = 'absolute'
        div.style.backgroundColor = this.color
        
    }
    function remove() {
        for(var i=elements.length-1; i>=0;i--){
            elements[i].parentNode.removeChild(elements[i])
            elements.splice(i, 1)
        }
      
    }
    
    window.Food = Food 
})(window, undefined);



// 蛇

(function(window, undefined){
    // 记录当前蛇的元素
    var elements = []
    function snack (options) {
        options = options || {}
        this.width = options.width || 20
        this.height = options.height || 20
        this.direction = options.direction || 'right' 
        this.body = [
            {x:3, y: 2, color: 'red'},
            {x:2, y: 2, color: 'blue'},
            {x:1, y: 2, color: 'blue'},
        ]
    }
    snack.prototype.move = function(food, map) {
        // 控制蛇的移动，当前蛇节到上一个蛇节的位置
        for( var i = this.body.length - 1; i>0; i--){
            this.body[i].x = this.body[i-1].x
            this.body[i].y = this.body[i-1].y
        }
        // 控制蛇的移动
        var head = this.body[0]
        switch(this.direction){
            case 'right':
                head.x += 1
                break
            case 'left':
                head.x -=1
                break
            case 'top':
                head.y -= 1
                break
            case 'bottom':
                head.y += 1
                break;
        }
        // 判断蛇头和食物是否重合
        var headX = head.x*this.width
        var headY = head.y*this.height
        if(headX===food.x&&headY===food.y)
        {
            // 当重合，重新渲染新的食物
            food.render(map)
            // 蛇的长度增加一节
            var last = this.body[this.body.length-1]
            this.body.push({
                x: last.x,
                y: last.y,
                color: last.color
            })
        }
    }
    snack.prototype.render = function(map) {
        remove()
        for( var i = 0; len = this.body.length, i< len; i++){
            var object = this.body[i]
            var div = document.createElement('div')
            elements.push(div)
            map.appendChild(div)
            div.style.position = 'absolute'
            div.style.width = this.width + 'px'
            div.style.height = this.height + 'px'
            div.style.left = object.x * this.width + 'px'
            div.style.top = object.y * this.height + 'px'
            div.style.backgroundColor = object.color
        }
    }
    function remove() {
        for(var i = elements.length - 1; i>=0; i--) {
            elements[i].parentNode.removeChild(elements[i])

            elements.splice(i, 1)
        }

    }
    window.Snack = snack
})(window, undefined);
// 自调用函数要加上‘;'因为自调用函数会生成undefind()造成后面的代码无法执行


// Game

(function (window, undefined) {
    var that
    function Game(map) {
        this.map = map
        this.food = new Food()
        this.food.render(this.map)
        this.snack = new Snack()
        that = this
    }

    Game.prototype.start = function () {
        runSnake()
        // 控制键盘移动
        bindKey()
        this.snack.render(this.map)
    }
    function bindKey() {
        document.addEventListener('keydown', function (e) {
            switch (e.keyCode) {
                case 37:
                    this.snack.direction = 'left'
                    break
                case 38:
                    this.snack.direction = 'top'
                    break
                case 39:
                    this.snack.direction = 'right'
                    break
                case 40:
                    this.snack.direction = 'bottom'
                    break
            }
        }.bind(that), false)
    }
    function runSnake() {
            var timeId = setInterval(function () {

            var maxX = this.map.offsetWidth / this.snack.width
            var maxY = this.map.offsetHeight / this.snack.height
            var x = this.snack.body[0].x
            var y = this.snack.body[0].y
            this.snack.move(this.food, this.map),
            this.snack.render(this.map)
            if (x >= maxX || y >= maxY || x < 0 || y < 0) {
                clearInterval(timeId)
                alert('Game Over')
            }

        }.bind(that), 150)
    }
    window.Game = Game
})(window, undefined)


